<template>
  <div>
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">分类管理</h1>
        <p class="page-description">管理项目分类，支持层级分类结构。</p>
      </div>
      <div class="header-right">
        <el-space>
          <el-button @click="handleRefresh" class="action-btn">
            <Icon name="fa:refresh" />
            刷新
          </el-button>
          <el-button type="primary" @click="showCreateModal" class="action-btn">
            <Icon name="fa:plus" />
            新建分类
          </el-button>
        </el-space>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <Icon name="fa:folder" />
            </div>
            <div class="stat-number">{{ totalCategories }}</div>
            <div class="stat-label">总分类数</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <Icon name="fa:check-circle" />
            </div>
            <div class="stat-number">{{ activeCategories }}</div>
            <div class="stat-label">启用分类</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <Icon name="fa:file-text" />
            </div>
            <div class="stat-number">{{ totalProjects }}</div>
            <div class="stat-label">总项目数</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <Icon name="fa:users" />
            </div>
            <div class="stat-number">{{ recentActivity }}</div>
            <div class="stat-label">最近活动</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 分类列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span class="table-title">分类列表</span>
          <el-input
            v-model="searchKeyword"
            placeholder="搜索分类名称..."
            style="width: 300px"
            clearable
          >
            <template #prefix>
              <Icon name="fa:search" />
            </template>
          </el-input>
        </div>
      </template>

      <el-table
        :data="filteredCategories"
        :loading="loading"
        row-key="id"
        stripe
      >
        <!-- 名称列 -->
        <el-table-column prop="name" label="分类名称" width="220">
          <template #default="{ row }">
            <div class="category-name">
              <div
                class="color-indicator"
                :style="{ backgroundColor: row.color }"
              ></div>
              <span class="name-text">{{ row.name }}</span>
              <el-tag
                :type="row.status === 'active' ? 'success' : 'info'"
                size="small"
              >
                {{ row.status === "active" ? "启用" : "禁用" }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <!-- 项目数量列 -->
        <el-table-column
          prop="postCount"
          label="项目数量"
          width="120"
          align="center"
        >
          <template #default="{ row }">
            <span class="project-count">{{ row.postCount }}</span>
          </template>
        </el-table-column>

        <!-- 描述列 -->
        <el-table-column prop="description" label="描述" min-width="100">
          <template #default="{ row }">
            <span>{{ row.description || "-" }}</span>
          </template>
        </el-table-column>

        <!-- 创建时间列 -->
        <el-table-column prop="createdAt" label="创建时间" width="150" />

        <!-- 状态列 -->
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="'active'"
              :inactive-value="'inactive'"
              @change="toggleStatus(row)"
              active-color="#13ce66"
            />
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="260" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <button class="action-btn edit-btn" @click="editCategory(row)">
                <Icon name="fa:edit" class="btn-icon" />
                <span class="btn-text">编辑</span>
              </button>

              <button class="action-btn view-btn" @click="viewProjects(row)">
                <Icon name="fa:eye" class="btn-icon" />
                <span class="btn-text">查看</span>
              </button>

              <el-tooltip
                :content="
                  row.postCount > 0 ? '该分类下有项目，无法删除' : '删除分类'
                "
                placement="top"
              >
                <button
                  class="action-btn delete-btn"
                  @click="deleteCategoryHandler(row)"
                  :disabled="row.postCount > 0"
                >
                  <Icon name="fa:trash" class="btn-icon" />
                  <span class="btn-text">删除</span>
                </button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建/编辑分类模态框 -->
    <el-dialog
      v-model="modalVisible"
      :title="editingCategory ? '编辑分类' : '新建分类'"
      @close="handleCancel"
      width="600px"
      class="category-modal"
    >
      <el-form
        :model="form"
        :rules="rules"
        label-width="100px"
        ref="formRef"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分类名称" prop="name" required>
              <el-input
                v-model="form.name"
                placeholder="请输入分类名称"
                size="large"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类颜色" prop="color">
              <el-color-picker
                v-model="form.color"
                :predefine="predefineColors"
                show-alpha
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="分类描述"
          prop="description"
          class="description-item"
        >
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入分类描述（可选，最多200个字符）"
            :rows="4"
            show-word-limit
            :maxlength="200"
            resize="vertical"
          />
        </el-form-item>

        <el-form-item label="分类图标" prop="icon">
          <el-input
            v-model="form.icon"
            placeholder="输入图标名称（如：fa:code）"
          >
            <template #prefix>
              <Icon :name="form.icon || 'fa:folder'" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="modal-footer">
          <el-button @click="handleCancel" size="large">取消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            size="large"
            :loading="submitting"
          >
            {{ editingCategory ? "更新" : "创建" }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { AdminCategory } from "~/types/admin";

// 类型定义
interface CategoryStats {
  totalCategories: number;
  activeCategories: number;
  totalProjects: number;
  recentActivity: number;
}

// 响应式数据
const loading = ref(false);
const error = ref<string | null>(null);
const modalVisible = ref(false);
const submitting = ref(false);
const editingCategory = ref<AdminCategory | null>(null);
const searchKeyword = ref("");
const formRef = ref();
const categories = ref<AdminCategory[]>([]);
const stats = ref({
  totalCategories: 0,
  activeCategories: 0,
  totalProjects: 0,
  recentActivity: 0,
});

// API 方法
// 获取所有分类
const fetchCategories = async (): Promise<AdminCategory[]> => {
  loading.value = true;
  error.value = null;

  try {
    const { data } = await $fetch<{ data: AdminCategory[] }>(
      "/api/admin/categories"
    );
    return data;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "获取分类列表失败";
    throw err;
  } finally {
    loading.value = false;
  }
};

// 获取分类统计
const fetchCategoryStats = async (): Promise<CategoryStats> => {
  loading.value = true;
  error.value = null;

  try {
    const { data } = await $fetch<{ data: CategoryStats }>(
      "/api/admin/categories/stats"
    );
    return data;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "获取分类统计失败";
    throw err;
  } finally {
    loading.value = false;
  }
};

// 表单数据
const form = ref({
  name: "",
  description: "",
  color: "#1890ff",
  icon: "fa:folder",
});

// 预定义颜色
const predefineColors = [
  "#1890ff",
  "#52c41a",
  "#fa541c",
  "#722ed1",
  "#faad14",
  "#13c2c2",
  "#eb2f96",
  "#f5222d",
  "#fa8c16",
  "#52c41a",
  "#1890ff",
  "#2f54eb",
  "#722ed1",
  "#eb2f96",
  "#f5222d",
];

// 验证规则
const rules = {
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    {
      min: 2,
      max: 20,
      message: "分类名称长度应在2-20个字符之间",
      trigger: "blur",
    },
  ],
  description: [
    { max: 200, message: "描述长度不能超过200个字符", trigger: "blur" },
  ],
};

// 计算属性
const filteredCategories = computed(() => {
  if (!searchKeyword.value) {
    return categories.value;
  }
  return categories.value.filter(
    (category) =>
      category.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      (category.description || "")
        .toLowerCase()
        .includes(searchKeyword.value.toLowerCase())
  );
});

const totalCategories = computed(() => stats.value.totalCategories);
const activeCategories = computed(() => stats.value.activeCategories);
const totalProjects = computed(() => stats.value.totalProjects);
const recentActivity = computed(() => stats.value.recentActivity);

// 方法
const handleRefresh = async () => {
  try {
    await loadData();
    ElMessage.success("数据刷新成功");
  } catch (error) {
    ElMessage.error("数据刷新失败");
  }
};

// 加载数据
const loadData = async () => {
  try {
    const [categoriesData, statsData] = await Promise.all([
      fetchCategories(),
      fetchCategoryStats(),
    ]);
    categories.value = categoriesData;
    stats.value = statsData;
  } catch (error) {
    console.error("加载数据失败:", error);
    throw error;
  }
};

const showCreateModal = () => {
  editingCategory.value = null;
  form.value = {
    name: "",
    description: "",
    color: "#1890ff",
    icon: "fa:folder",
  };
  modalVisible.value = true;
};

const editCategory = (category: AdminCategory) => {
  editingCategory.value = category;
  form.value = {
    name: category.name,
    description: category.description || "",
    color: category.color || "#1890ff",
    icon: category.icon || "fa:folder",
  };
  modalVisible.value = true;
};

const viewProjects = (category: AdminCategory) => {
  console.log("查看项目:", category.id);
  // 跳转到项目列表页面，按分类筛选
};

const deleteCategoryHandler = (category: AdminCategory) => {
  ElMessageBox.confirm(
    `确定要删除分类 "${category.name}" 吗？此操作不可恢复。`,
    "删除确认",
    {
      confirmButtonText: "确定删除",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    loading.value = true;
    error.value = null;

    try {
      const { success } = await $fetch<{ success: boolean }>(
        `/api/admin/categories/${category.id}`,
        {
          method: "DELETE",
        }
      );
      if (success) {
        categories.value = categories.value.filter((c) => c.id !== category.id);
        // 更新统计数据
        const statsData = await fetchCategoryStats();
        stats.value = statsData;
        ElMessage.success("分类删除成功");
      } else {
        ElMessage.error("分类删除失败");
      }
    } catch (err) {
      error.value = err instanceof Error ? err.message : "删除分类失败";
      ElMessage.error("分类删除失败");
    } finally {
      loading.value = false;
    }
  });
};

const toggleStatus = async (category: AdminCategory) => {
  loading.value = true;
  error.value = null;

  try {
    const { success, data } = await $fetch<{
      success: boolean;
      data: AdminCategory;
    }>(`/api/admin/categories/${category.id}`, {
      method: "PUT",
      body: {
        name: category.name,
        description: category.description,
        color: category.color,
        icon: category.icon,
        status: category.status,
      },
    });
    if (success) {
      // 更新本地数据
      const index = categories.value.findIndex((c) => c.id === category.id);
      if (index !== -1) {
        categories.value[index] = data;
      }

      ElMessage.success(
        `分类 ${category.status === "active" ? "启用" : "禁用"}成功`
      );
    } else {
      ElMessage.error(
        `分类 ${category.status === "active" ? "启用" : "禁用"}失败`
      );
    }
  } catch (err) {
    error.value = err instanceof Error ? err.message : "状态更新失败";
    // 恢复原状态
    category.status = category.status === "active" ? "inactive" : "active";
    ElMessage.error("状态更新失败");
  } finally {
    loading.value = false;
  }
};

// 颜色转换函数：将rgba转换为十六进制
const rgbaToHex = (rgba: string | undefined): string => {
  if (!rgba || rgba.startsWith("#")) {
    return rgba || "#1890ff";
  }

  // 处理rgba格式：rgba(24, 144, 255, 1)
  const rgbaMatch = rgba.match(
    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
  );
  if (rgbaMatch && rgbaMatch[1] && rgbaMatch[2] && rgbaMatch[3]) {
    const r = parseInt(rgbaMatch[1]).toString(16).padStart(2, "0");
    const g = parseInt(rgbaMatch[2]).toString(16).padStart(2, "0");
    const b = parseInt(rgbaMatch[3]).toString(16).padStart(2, "0");
    return `#${r}${g}${b}`;
  }

  return "#1890ff";
};

const handleSubmit = async () => {
  try {
    submitting.value = true;
    loading.value = true;
    error.value = null;
    await formRef.value.validate();

    // 转换颜色格式为十六进制
    const colorHex = rgbaToHex(form.value.color);

    if (editingCategory.value) {
      // 更新分类
      const { success, data } = await $fetch<{
        success: boolean;
        data: AdminCategory;
      }>(`/api/admin/categories/${editingCategory.value.id}`, {
        method: "PUT",
        body: {
          name: form.value.name,
          description: form.value.description,
          color: colorHex,
          icon: form.value.icon,
          status: editingCategory.value.status,
        },
      });
      if (success) {
        // 更新本地数据
        const index = categories.value.findIndex(
          (c) => c.id === editingCategory.value!.id
        );
        if (index !== -1) {
          categories.value[index] = data;
        }
        ElMessage.success("分类更新成功");
      } else {
        ElMessage.error("分类更新失败");
      }
    } else {
      // 创建新分类
      const { success, data } = await $fetch<{
        success: boolean;
        data: AdminCategory;
      }>("/api/admin/categories", {
        method: "POST",
        body: {
          name: form.value.name,
          description: form.value.description,
          color: colorHex,
          icon: form.value.icon,
        },
      });
      if (success) {
        categories.value.unshift(data);
        // 更新统计数据
        const statsData = await fetchCategoryStats();
        stats.value = statsData;
        ElMessage.success("分类创建成功");
      } else {
        ElMessage.error("分类创建失败");
      }
    }

    modalVisible.value = false;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "操作失败";
    console.error("操作失败:", err);
    ElMessage.error(editingCategory.value ? "分类更新失败" : "分类创建失败");
  } finally {
    submitting.value = false;
    loading.value = false;
  }
};

const handleCancel = () => {
  modalVisible.value = false;
};

// 页面元数据
useHead({
  title: "分类管理 - 项目管理系统",
});

// 初始化
onMounted(async () => {
  await loadData();
});
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #1a1a1a;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
}

.page-description {
  color: #666;
  margin: 0;
  font-size: 14px;
}

/* 统计卡片样式 */
.stats-cards {
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 24px;
  color: #667eea;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  flex-shrink: 0;
}

.stat-label {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
  font-weight: 500;
  margin-left: auto;
}

/* 表格样式 */
.table-card {
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.category-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.name-text {
  font-weight: 600;
  color: #1a1a1a;
}

.project-count {
  font-weight: 600;
  color: #667eea;
  font-size: 16px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:disabled::before {
  display: none;
}

.edit-btn {
  color: #409eff;
  border: 1px solid #c6e2ff;
  background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
}

.edit-btn:hover {
  color: white;
  border-color: #409eff;
  background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
}

.view-btn {
  color: #67c23a;
  border: 1px solid #c2e7b0;
  background: linear-gradient(135deg, #f0f9ff 0%, #f6ffed 100%);
}

.view-btn:hover {
  color: white;
  border-color: #67c23a;
  background: linear-gradient(135deg, #67c23a 0%, #52c41a 100%);
}

.delete-btn {
  color: #f56c6c;
  border: 1px solid #fbc4c4;
  background: linear-gradient(135deg, #fef0f0 0%, #fdf2f2 100%);
}

.delete-btn:hover:not(:disabled) {
  color: white;
  border-color: #f56c6c;
  background: linear-gradient(135deg, #f56c6c 0%, #e54545 100%);
}

.btn-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.action-btn:hover .btn-icon {
  transform: scale(1.1);
}

.action-btn:disabled .btn-icon {
  transform: none;
}

.btn-text {
  font-size: 12px;
  white-space: nowrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .action-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  .btn-text {
    display: none;
  }

  .btn-icon {
    font-size: 16px;
  }

  .action-buttons {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* 模态框样式 */
.category-modal {
  border-radius: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

/* 描述输入框特殊样式 */
:deep(.description-item .el-form-item__label) {
  font-size: 16px;
  color: #1890ff;
}

:deep(.description-item .el-textarea__inner) {
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.description-item .el-textarea__inner:focus) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

:deep(.description-item .el-textarea__inner:hover) {
  border-color: #40a9ff;
}

:deep(.el-input) {
  border-radius: 8px;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
  resize: vertical;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-card__header) {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 24px;
  font-weight: 600;
  color: #1a1a1a;
}

:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-table) {
  border-radius: 0 0 12px 12px;
}

:deep(.el-table td) {
  padding: 16px 12px;
}

:deep(.el-table .cell) {
  line-height: 1.5;
}

/* 按钮样式优化 */
:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border: none;
}

:deep(.el-button--success:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
}

/* 开关样式 */
:deep(.el-switch) {
  --el-switch-on-color: #52c41a;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .categories-page {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 20px;
  }

  .table-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .table-title {
    text-align: center;
  }

  .stats-cards .el-col {
    margin-bottom: 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .category-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }
}

/* 动画效果 */
.page-header,
.stat-card,
.table-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 暗色主题适配 */
.dark .page-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .page-title {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .page-description {
  color: #94a3b8;
}

/* 统计卡片暗色主题 */
.dark .stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .stat-card:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark .stat-icon {
  color: #3b82f6;
}

.dark .stat-number {
  color: #f8fafc;
}

.dark .stat-label {
  color: #94a3b8;
}

/* 表格暗色主题 */
.dark .table-card {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .table-title {
  color: #f8fafc;
}

.dark .name-text {
  color: #f8fafc;
}

.dark .project-count {
  color: #3b82f6;
}

/* 操作按钮暗色主题 */
.dark .edit-btn {
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.05) 100%
  );
}

.dark .edit-btn:hover {
  color: white;
  border-color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.dark .view-btn {
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(16, 185, 129, 0.05) 100%
  );
}

.dark .view-btn:hover {
  color: white;
  border-color: #10b981;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.dark .delete-btn {
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(239, 68, 68, 0.05) 100%
  );
}

.dark .delete-btn:hover:not(:disabled) {
  color: white;
  border-color: #ef4444;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Element Plus 组件暗色主题适配 */
.dark :deep(.el-input__inner) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark :deep(.el-input__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark :deep(.el-input__inner::placeholder) {
  color: #64748b;
}

.dark :deep(.el-input__inner:hover) {
  border-color: rgba(255, 255, 255, 0.3);
}

.dark :deep(.el-input__prefix),
.dark :deep(.el-input__suffix) {
  color: #94a3b8;
}

.dark :deep(.el-input__prefix .el-icon),
.dark :deep(.el-input__suffix .el-icon) {
  color: #94a3b8;
}

.dark :deep(.el-input__prefix .el-icon:hover),
.dark :deep(.el-input__suffix .el-icon:hover) {
  color: #f8fafc;
}

.dark :deep(.el-input__suffix .el-input__clear) {
  color: #94a3b8;
}

.dark :deep(.el-input__suffix .el-input__clear:hover) {
  color: #f8fafc;
}

.dark :deep(.el-select .el-input__suffix .el-input__suffix-inner .el-icon) {
  color: #94a3b8;
}

.dark
  :deep(.el-select .el-input__suffix .el-input__suffix-inner .el-icon:hover) {
  color: #f8fafc;
}

.dark :deep(.el-input.is-disabled .el-input__inner) {
  background: #334155;
  border-color: rgba(255, 255, 255, 0.1);
  color: #64748b;
}

.dark :deep(.el-input.is-disabled .el-input__inner::placeholder) {
  color: #475569;
}

.dark :deep(.el-textarea__inner) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark :deep(.el-textarea__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark :deep(.el-textarea__inner::placeholder) {
  color: #64748b;
}

.dark :deep(.el-color-picker) {
  --el-color-picker-color: #f8fafc;
}

.dark :deep(.el-color-picker__trigger) {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-color-picker__panel) {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark :deep(.el-table) {
  --el-table-bg-color: #1e293b;
  --el-table-tr-bg-color: #1e293b;
  --el-table-header-bg-color: #0f172a;
  --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.05);
  --el-table-border-color: rgba(255, 255, 255, 0.1);
}

.dark :deep(.el-table th) {
  background: #0f172a;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark :deep(.el-table td) {
  background: #1e293b;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark :deep(.el-table .cell) {
  color: #f8fafc;
}

.dark :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: rgba(255, 255, 255, 0.02);
}

.dark :deep(.el-table--enable-row-hover .el-table__body tr:hover td) {
  background: rgba(255, 255, 255, 0.05);
}

.dark :deep(.el-card__header) {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.dark :deep(.el-card) {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark :deep(.el-dialog) {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark :deep(.el-dialog__header) {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.dark :deep(.el-dialog__title) {
  color: #f8fafc;
}

.dark :deep(.el-form-item__label) {
  color: #f8fafc;
}

.dark :deep(.el-button) {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-button--primary) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
}

.dark :deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.dark :deep(.el-button--success) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

.dark :deep(.el-button--success:hover) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.dark :deep(.el-switch) {
  --el-switch-on-color: #10b981;
}

.dark :deep(.el-tag) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-tag--success) {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.dark :deep(.el-tag--info) {
  background: rgba(100, 116, 139, 0.2);
  border-color: rgba(100, 116, 139, 0.3);
  color: #94a3b8;
}

/* 滚动条暗色主题 */
.dark ::-webkit-scrollbar-track {
  background: #334155;
}

.dark ::-webkit-scrollbar-thumb {
  background: #64748b;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
